<template>
  <div>
    <!--查询条件-->
    <div class="crud_menu_title clearfix">
      <span class="fl">查询条件</span>
      <span
        v-if="advancedSearch"
        class="fr pointer"
        @click="handleToggleSearch"
      >
        <el-link :underline="false" type="primary" />
        <template v-if="toggleSearchStatus">
          <el-icon
            class="toggleSearchStatus"
            :class="toggleSearchStatus ? 'arrow-is-active' : ''"
            ><ArrowDownBold /></el-icon
          >收起高级查询
        </template>
        <template v-else>
          <el-icon
            class="toggleSearchStatus"
            :class="toggleSearchStatus ? 'arrow-is-active' : ''"
            ><ArrowDownBold /></el-icon
          >展开高级查询
        </template>
      </span>
    </div>
    <div
      :class="{ SearchContent_show: toggleSearchStatus }"
      class="clearfix SearchContent"
    >
      <div class="SearchContent_leftInput fl">
        <el-form
          ref="searchFormRef"
          :model="searchForm"
          inline
          :label-position="labelPosition"
        >
          <slot name="search" />
        </el-form>
      </div>
      <div class="fr">
        <el-button type="primary" @click="searchChange"> 搜 索 </el-button>
        <el-button plain type="info" @click="searchReset"> 重 置 </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { inject, reactive, toRefs, ref, onMounted } from "vue";
import { ArrowDownBold } from "@element-plus/icons";
export default {
  name: "HeaderSearch",
  props: {
    /* 是否展示分页*/
    pageFlag: {
      type: Boolean,
      default: true,
    },
    /* 是否展示高级搜索*/
    advancedSearch: {
      type: Boolean,
      default: true,
    },
    // label显示
    labelPosition: {
      type: String,
      default: "",
    },
  },
  components: {
    ArrowDownBold,
  },
  setup(props) {
    const tableCrud = inject("tableCrud");
    const onSearchChange = inject("onSearchChange");
    const onSearchReset = inject("searchReset");
    const searchFormRef = ref(null);
    const state = reactive({
      searchLabelWidth: "98px",
      /* 查询折叠 */
      toggleSearchStatus: false,
      searchForm: {},
      activeName: "",
    });
    onMounted(() => {
      state.searchForm = tableCrud.searchData;
    });

    const handleToggleSearch = () => {
      state.toggleSearchStatus = !state.toggleSearchStatus;
    };
    // 搜索回调
    const searchChange = () => {
      onSearchChange();
    };
    // 搜索清空
    const searchReset = () => {
      searchFormRef.value.resetFields();
      onSearchReset();
    };
    return {
      ...toRefs(state),
      // ref
      searchFormRef,
      // Func
      handleToggleSearch,
      searchChange,
      searchReset,
    };
  },
};
</script>

<style scoped lang="scss">
.crud_menu_title {
  border-bottom: 1px solid #eeeeee;
  color: rgba(51, 51, 51, 1);
  line-height: 36px;
  font-size: 12px;
  margin-bottom: 10px;

  .icon-line {
    font-weight: bold;
    display: inline-block;

    &:after {
      content: "";
      display: block;
      height: 2px;
      background: rgba(0, 124, 204, 1);
    }
  }
}
</style>